<template>

  <!-- 面包屑 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>
      <a href="/">流程引擎</a>
    </el-breadcrumb-item>
    <el-breadcrumb-item>流程节点</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 搜索区域,根据条件获取数据源 -->
  <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="节点名称">
        <el-input v-model="formInline.NodeName" placeholder="请输入节点名称" clearable />
      </el-form-item>


      <el-form-item label="节点编号">
        <el-input v-model="formInline.NodeCode" placeholder="请输入节点编号" clearable />
      </el-form-item>

      <el-form-item label="选择行业">
        <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择所属行业" style="width: 200px;">
          <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="选择类别">
        <el-select @change="getForms()" v-model="formInline.formCategoryCode" placeholder="请选择表单类别"
          style="width: 200px;">
          <el-option v-for="item in categorys" :label="item.formCategoryName" :value="item.formCategoryCode" />
        </el-select>
      </el-form-item>

      <el-form-item label="选择流程表单">
        <el-select @change="ruleForm.formId=formInline.FormId" v-model="formInline.FormId" placeholder="请选择表单" style="width: 200px;">
          <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <!-- 数据展示区域,展示数据源 -->
  <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
    <el-button type="success" @click="toAddNode()">添加节点</el-button>

    <el-table :data="tableData">
      <el-table-column type="index" fixed="left" label="序号" width="80"></el-table-column>
      <el-table-column prop="nodeCode" label="编号" width="180"> </el-table-column>
      <el-table-column prop="nodeName" label="节点名称" width="280"> </el-table-column>
      <el-table-column prop="nodeDes" label="节点描述" width="380"> </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button size="small" type="danger">删除</el-button>
          <el-button size="small" type="primary">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination v-model:current-page="page.PageIndex" v-model:page-size="page.PageSize"
      :page-sizes="[2, 4, 6, 8, 10, 12]" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" />
  </div>
  <!-- 添加弹窗 -->
  <el-dialog v-model="addNodeDialog" title="添加流程节点">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">


      <el-form-item label="所属表单" prop="nodeName">
        <el-input v-model="ruleForm.formId" disabled="true" />
      </el-form-item>
      <el-form-item label="节点名称" prop="nodeName">
        <el-input v-model="ruleForm.nodeName" />
      </el-form-item>

      <el-form-item label="节点描述" prop="nodeDes">
        <el-input v-model="ruleForm.nodeDes" type="textarea" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
 
  </el-dialog>
 

</template>

<script setup lang="ts">
import myAxios from '@/http/axiosHelper';
import { onMounted, reactive, ref, watch } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
const formInline = reactive({//从接口文档中取
  NodeName: '',
  NodeCode: '',
  IndustryId: null,
  formCategoryCode: '',
  FormId: null
})
const clearFormInline = () => {

  formInline.IndustryId = null;
  formInline.formCategoryCode = '';
  formInline.FormId = null;
}

const page = reactive(
  {
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0
  })
watch(page, () => {
  search();
})

const tableData = ref([])

const search = () => {
  myAxios.get('/PERead/Node/GetNodes',
    {
      params: {
        NodeName: formInline.NodeName, NodeCode: formInline.NodeCode,
        PageIndex: page.PageIndex, PageSize: page.PageSize,
        FormId:formInline.FormId
      }
    }).then(res => {
      tableData.value = res.data.pageDatas
      page.totalCount = res.data.totalCount
    })
}
const reset = () => {
  formInline.NodeCode = ''
  formInline.NodeName = ''
}

const addNodeDialog = ref(false)


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  "formId": 0,
  "nodeName": "",
  "nodeDes": ""
})

const locationOptions = ['Home', 'Company', 'School']

const rules = reactive<FormRules>({
  nodeName: [
    { required: true, message: '请输入节点名称', trigger: 'blur' },
    { min: 2, max: 25, message: '节点名称长度请控制在2-25位', trigger: 'blur' },
  ], nodeDes: [
    { required: true, message: '请输入节点描述', trigger: 'blur' }
  ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {//校验通过,调用保存接口
      myAxios.post('/PEWrite/Node/CreateNode', ruleForm).then(res => {
        if (res.data.code == 200) {//说明接口保存成功
          //弹窗提示
          ElMessage.success(res.data.msg);
          //关闭弹窗
          addNodeDialog.value = false
          //重新加载数据
          search();
          //清理表单数据
          formEl.resetFields()
        } else {
          //弹窗提示  
          ElMessage.error(res.data.msg);
        }
      })
    } else {
      console.log('提交失败!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}


const industrys = ref([{
  "id": 1,
  "industryName": "行政"
}
])
const getIndustrys = () => {
  formInline.IndustryId = null;
  myAxios.get('/PERead/ProcessEngine/GetIndustry').then(res => {
    industrys.value = res.data.data
  })

}




const categorys = ref([{
  "id": null,
  "formCategoryName": "",
  "formCategoryCode": "",
  "industryId": null,
  "industryName": ""
}])

const getCategorys = () => {
  myAxios.get('/PERead/ProcessEngine/SearchFormCategory', { params: { IndustryId: formInline.IndustryId } }).then(res => {
    categorys.value = res.data.data
  })
  formInline.formCategoryCode = ''
}


const forms = ref([
  {
    "id": null,
    "formCode": "",
    "formName": ""
  },
])
const getForms = () => {
  myAxios.get('/PERead/ProcessEngine/GetFormPages', { params: { CategoryCode: formInline.formCategoryCode } }).then(res => {
    forms.value = res.data.pageDatas
  })
  // formInline.FormId=null;
}


const toAddNode = () => {
  if (formInline.FormId == null) {
    ElMessage.warning("请选择流程表单");

  } else {
    addNodeDialog.value = true;
  }

}

onMounted(() => {
  search();
  getIndustrys();
  getCategorys();
  getForms();
})


</script>